<template>
  <div class="container">
    <card>
    培养目标
    <div>
      <Input
        v-model="value"
        clearable
        placeholder="Enter something..."
        style="width: 50%"
        type="textarea"
      />
    </div>
    <Divider orientation="left">文本</Divider>
    <Button
      v-clipboard:copy="value"
      v-clipboard:error="onError"
      v-clipboard:success="onCopy"
      class="example-btn"
      >复制文本示例
    </Button>
    <br />
    <Input
      :autosize="{ minRows: 2, maxRows: 5 }"
      placeholder="粘贴测试"
      style="width: 300px"
      type="textarea"
    />

    <Divider orientation="left">排列</Divider>
    <draggable
      v-model="list"
      :animation="200"
      class="draggable-container"
      ghost-class="ghost"
    >
      <transition-group name="flip-list" type="transition">
        <li v-for="item in list" :key="item.id" class="list-group-item">
          {{ item.name }}
        </li>
      </transition-group>
    </draggable>

    <Divider orientation="left">图片</Divider>
    <div id="image">
      <img
          src="https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png"
          width="200px"
          style="cursor: zoom-in;margin-right: 10px"
      />
      <img
          src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
          width="200px"
          style="cursor: zoom-in"
      />
    </div>
    </card>
  </div>
</template>
<script>
import Viewer from "viewerjs";

export default {
  name: "trainingGoal",
  data() {
    return {
      value: "This is training goal...",
      list: [
        { name: "A：This is A", id: 0 },
        { name: "B：This is B", id: 1 },
        { name: "C：This is C", id: 2 },
      ],
    };
  },
  methods: {
    init(){
      new Viewer(document.getElementById("image"));
    },
    onCopy() {
      this.$Message.success("复制成功");
    },
    onError() {
      this.$Message.warning("复制失败，请手动复制");
    },
  },
  mounted(){
    this.init();
  },
};
</script>
<style lang="less">
.draggable-container {
  margin: 10px 0;
  width: 50%;
}

.list-group-item {
  cursor: move;
  position: relative;
  display: block;
  padding: 10px 20px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}
</style>
